<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象和jQuery对象的互相转换</title>
</head>
<body>
    <input type="checkbox" value='学习'>学习
    <input type="checkbox" checked value='打球'>打球
    <input type="checkbox" value='打游戏'>打游戏
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let cks = $('input[type="checkbox"]')
        // each()方法，遍历出所有DOM对象
        cks.each((index,item)=>{
            //item是DOM对象，可以点出DOM的属性
            if(item.checked){
                console.log(item.value);
            }
        })
        console.log('-------------------');
        //jQuery转DOM有两种方式：1.jQuery[index]  2.jQuery.get(index)
        //获取第一个元素，并转为DOM对象
        let two = cks[1]
        console.log(two.value);
        let three = cks.get(2)
        console.log(three.value);
        console.log('----------------------');
        //将DOM对象，转为jQuery对象的方式是：$(DOM)
        let jq_two = $(two)
        //val()方法 => value
        console.log(jq_two.val());



        //$()  方法的原理
        /* function $(val){
            if(val instanceof String){
                //根据选择器查找元素
            }else if(val instanceof Object){
                //转换指定的DOM对象
            }
        } */

    </script>
</body>
</html>